<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" >

function OnDivScroll()
{
    var lstCollegeNames = document.getElementById("lstCollegeNames");


    if (lstCollegeNames.options.length > 28)
    {
        lstCollegeNames.size=lstCollegeNames.options.length;
    }
    else
    {
        lstCollegeNames.size=28;
    }
}




function OnSelectFocus()
{
    
    if (document.getElementById("divCollegeNames").scrollLeft != 0)
    {
        document.getElementById("divCollegeNames").scrollLeft = 0;
    }

    var lstCollegeNames = document.getElementById('lstCollegeNames');
    
    if( lstCollegeNames.options.length > 28)
    {
        lstCollegeNames.focus();
        lstCollegeNames.size=28;
    }
}


</script>


<div id='divCollegeNames' 
  style="OVERFLOW: auto;WIDTH: 120px;HEIGHT: 147px"  onscroll="OnDivScroll();" >
  
  <SELECT id='lstCollegeNames' size="18"  multiple onfocus="OnSelectFocus();" >
  
  <option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
<option value="4">one two three four five six</option>
<option value="5">seven eight</option>
<option value="6">nine ten</option>
<option value="7">one two three four five six</option>
<option value="8">seven eight</option>
<option value="9">nine ten</option>
<option value="10">one two three four five six</option>
<option value="11">seven eight</option>
<option value="12">nine ten</option>
</select>
</div>

</body>
</html>
